<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>@magenta/image</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<header>
	<div class="tsd-page-toolbar">
		<div class="container">
			<div class="table-wrap">
				<div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base=".">
					<div class="field">
						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
						<input id="tsd-search-field" type="text" />
					</div>
					<ul class="results">
						<li class="state loading">Preparing search index...</li>
						<li class="state failure">The search index is not available</li>
					</ul>
					<a href="index.html" class="title">@magenta/image</a>
				</div>
				<div class="table-cell" id="tsd-widgets">
					<div id="tsd-filter">
						<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
						<div class="tsd-filter-group">
							<div class="tsd-select" id="tsd-filter-visibility">
								<span class="tsd-select-label">All</span>
								<ul class="tsd-select-list">
									<li data-value="public">Public</li>
									<li data-value="protected">Public/Protected</li>
									<li data-value="private" class="selected">All</li>
								</ul>
							</div>
							<input type="checkbox" id="tsd-filter-inherited" checked />
							<label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
							<input type="checkbox" id="tsd-filter-only-exported" />
							<label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
						</div>
					</div>
					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
				</div>
			</div>
		</div>
	</div>
	<div class="tsd-page-title">
		<div class="container">
			<ul class="tsd-breadcrumb">
				<li>
					<a href="globals.html">Globals</a>
				</li>
			</ul>
			<h1> @magenta/image</h1>
		</div>
	</div>
</header>
<div class="container container-main">
	<div class="row">
		<div class="col-8 col-content">
			<div class="tsd-panel tsd-typography">
				<h1 id="-magenta-image">@magenta/image</h1>
				<p>This JavaScript implementation of Magenta&#39;s image models uses <a href="https://js.tensorflow.org">TensorFlow.js</a> for GPU-accelerated inference.</p>
				<p>Complete documentation is available at <a href="https://tensorflow.github.io/magenta-js/image">https://tensorflow.github.io/magenta-js/image</a>.</p>
				<h2 id="contents">Contents</h2>
				<ul>
					<li><a href="#example-applications">Example Applications</a></li>
					<li><a href="#supported-models">Supported Models</a></li>
					<li><a href="#getting-started">Getting Started</a></li>
				</ul>
				<h2 id="example-applications">Example Applications</h2>
				<p>You can try our <a href="https://tensorflow.github.io/magenta-js/image/demos">hosted demos</a> for each model and have a look at the <a href="./demos">demo code</a>.</p>
				<h2 id="supported-models">Supported Models</h2>
				<h3 id="fast-arbitrary-image-stylization">Fast Arbitrary Image Stylization</h3>
				<p>Implements Ghiasi et al.&#39;s fast arbitrary style transfer model (<a href="https://arxiv.org/abs/1705.06830">paper</a>, <a href="https://github.com/tensorflow/magenta/tree/master/magenta/models/arbitrary_image_stylization">code</a>). Wraps around Reiichiro Nakano&#39;s <a href="https://github.com/reiinakano/arbitrary-image-stylization-tfjs">TensorFlow.js port</a> of the model checkpoint.</p>
				<h2 id="getting-started">Getting started</h2>
				<p>There are two main ways to get MagentaImage.js in your JavaScript project:
					via <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">script tags</a> <strong>or</strong> by installing it from <a href="https://www.npmjs.com/">NPM</a>
				and using a build tool like <a href="https://yarnpkg.com/en/">yarn</a>.</p>
				<h3 id="via-script-tag">via Script Tag</h3>
				<p>Add the following code to an HTML file, and place a content (<code>content.jpg</code>) and style (<code>style.jpg</code>) image in the same directory:</p>
				<pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
    <span class="hljs-comment">&lt;!-- Load @magenta/image --&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/@magenta/image@^0.1.2"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"content"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"256"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"content.jpg"</span>/&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"style"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"256"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"style.jpg"</span>/&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">canvas</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"stylized"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"256"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">canvas</span>&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
        <span class="hljs-keyword">const</span> model = <span class="hljs-keyword">new</span> mi.ArbitraryStyleTransferNetwork();
        <span class="hljs-keyword">const</span> contentImg = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'content'</span>);
        <span class="hljs-keyword">const</span> styleImg = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'style'</span>);
        <span class="hljs-keyword">const</span> stylizedCanvas = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'stylized'</span>);

        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">stylize</span>(<span class="hljs-params"></span>) </span>{
          model.stylize(contentImg, styleImg).then(<span class="hljs-function">(<span class="hljs-params">imageData</span>) =&gt;</span> {
            stylizedCanvas.getContext(<span class="hljs-string">'2d'</span>).putImageData(imageData, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
          });
        }

        model.initialize().then(stylize);
      </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre>
				<p>Launch a simple HTTP server (e.g. <code>python3 -m http.server</code>) and point your browser to <a href="http://0.0.0.0:8000/">http://0.0.0.0:8000/</a>. You should see your content and style images displayed and, after a few seconds, the stylized output.</p>
				<h3 id="via-npm">via NPM</h3>
				<p>Add <a href="https://www.npmjs.com/package/@magenta/image">MagentaImage.js</a> to your project using <a href="https://yarnpkg.com/en/">yarn</a> <strong>or</strong> <a href="https://docs.npmjs.com/cli/npm">npm</a>.
				For example, with yarn you can simply call <code>yarn add @magenta/image</code>.</p>
				<p>Then, you can use the library in your own code as in the following example:</p>
				<pre><code class="language-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> mi <span class="hljs-keyword">from</span> <span class="hljs-string">'@magenta/image'</span>;

<span class="hljs-keyword">const</span> model = <span class="hljs-keyword">new</span> mi.ArbitraryStyleTransferNetwork();
<span class="hljs-keyword">const</span> contentImg = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'content'</span>) <span class="hljs-keyword">as</span> HTMLImageElement;
<span class="hljs-keyword">const</span> styleImg = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'style'</span>) <span class="hljs-keyword">as</span> HTMLImageElement;
<span class="hljs-keyword">const</span> stylizedCanvas = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'stylized'</span>) <span class="hljs-keyword">as</span> HTMLCanvasElement;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">stylize</span>(<span class="hljs-params"></span>) </span>{
  model.stylize(contentImg, styleImg).then(<span class="hljs-function">(<span class="hljs-params">imageData</span>) =&gt;</span> {
    stylizedCanvas.getContext(<span class="hljs-string">'2d'</span>).putImageData(imageData, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
  });
}

model.initialize().then(stylize);</code></pre>
				<p>See <a href="https://style-transfer.glitch.me">style-transfer.glitch.me</a> and our <a href="./demos">demos</a> for example usage.</p>
				<h4 id="example-commands">Example Commands</h4>
				<p><code>yarn install</code> to install dependencies.</p>
				<p><code>yarn test</code> to run tests.</p>
				<p><code>yarn bundle</code> to produce a bundled version in <code>dist/</code>.</p>
				<p><code>yarn run-demos</code> to build and run the demo.</p>
				<!-- links -->
			</div>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class="globals  ">
						<a href="globals.html"><em>Globals</em></a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
					<li class=" tsd-kind-class">
						<a href="classes/arbitrarystyletransfernetwork.html" class="tsd-kind-icon">Arbitrary<wbr>Style<wbr>Transfer<wbr>Network</a>
					</li>
					<li class=" tsd-kind-variable tsd-is-not-exported">
						<a href="globals.html#default_style_checkpoint" class="tsd-kind-icon">DEFAULT_<wbr>STYLE_<wbr>CHECKPOINT</a>
					</li>
					<li class=" tsd-kind-variable tsd-is-not-exported">
						<a href="globals.html#default_transform_checkpoint" class="tsd-kind-icon">DEFAULT_<wbr>TRANSFORM_<wbr>CHECKPOINT</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>
<footer class="with-border-bottom">
	<div class="container">
		<h2>Legend</h2>
		<div class="tsd-legend-group">
			<ul class="tsd-legend">
				<li class="tsd-kind-module"><span class="tsd-kind-icon">Module</span></li>
				<li class="tsd-kind-object-literal"><span class="tsd-kind-icon">Object literal</span></li>
				<li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li>
				<li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li>
				<li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li>
				<li class="tsd-kind-index-signature"><span class="tsd-kind-icon">Index signature</span></li>
				<li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
				<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
				<li class="tsd-kind-property tsd-parent-kind-enum"><span class="tsd-kind-icon">Property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-enum"><span class="tsd-kind-icon">Method</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li>
				<li class="tsd-kind-interface tsd-has-type-parameter"><span class="tsd-kind-icon">Interface with type parameter</span></li>
				<li class="tsd-kind-constructor tsd-parent-kind-interface"><span class="tsd-kind-icon">Constructor</span></li>
				<li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-interface"><span class="tsd-kind-icon">Method</span></li>
				<li class="tsd-kind-index-signature tsd-parent-kind-interface"><span class="tsd-kind-icon">Index signature</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
				<li class="tsd-kind-class tsd-has-type-parameter"><span class="tsd-kind-icon">Class with type parameter</span></li>
				<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
				<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
				<li class="tsd-kind-index-signature tsd-parent-kind-class"><span class="tsd-kind-icon">Index signature</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private"><span class="tsd-kind-icon">Private accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
				<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
			</ul>
		</div>
	</div>
</footer>
<div class="container tsd-generator">
	<p>Generated using <a href="http://typedoc.org/" target="_blank">TypeDoc</a></p>
</div>
<div class="overlay"></div>
<script src="assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script>
</body>
</html>